<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多样化文章推荐展示</title>
    
    <!-- 引入所需的CDN文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <style>
        :root {
            --primary: #4263eb;
            --primary-dark: #334195;
            --primary-light: #eef1ff;
            --gray: #6c757d;
            --light-gray: #e9ecef;
            --shadow-sm: 0 2px 5px rgba(0,0,0,0.05);
            --shadow: 0 4px 10px rgba(0,0,0,0.08);
            --transition: all 0.3s ease;
        }
        
        .post-source {
            font-size: 0.8rem;
            color: white;
            padding: 2px 8px;
            background: var(--primary);
            border-radius: 4px;
            margin-right: 8px;
        }
        
        .post-time {
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .article-card {
            transition: var(--transition);
            height: 100%;
        }
        
        .article-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }
        
        .article-image {
            transition: var(--transition);
        }
        
        .article-card:hover .article-image {
            transform: scale(1.03);
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .layout-tabs .nav-link {
            color: var(--gray);
            border: none;
            border-bottom: 2px solid transparent;
            border-radius: 0;
            padding: 0.5rem 1rem;
            font-weight: 500;
        }
        
        .layout-tabs .nav-link.active {
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
            background: transparent;
        }
        
        .layout-tabs .nav-link:hover:not(.active) {
            color: var(--primary);
            border-bottom: 2px solid var(--primary-light);
        }
        
        /* 列表布局专用样式 */
        .list-layout .article-card {
            display: flex;
            flex-direction: row;
            height: auto;
        }
        
        @media (max-width: 768px) {
            .list-layout .article-card {
                flex-direction: column;
            }
        }
        
        .list-layout .article-image-container {
            flex: 0 0 200px;
        }
        
        .list-layout .article-content {
            flex: 1;
        }
        
        /* 混合布局专用样式 */
        .hybrid-layout .featured-article {
            grid-column: span 2;
            grid-row: span 1;
        }
        
        @media (max-width: 992px) {
            .hybrid-layout .featured-article {
                grid-column: span 1;
            }
        }
    </style>
</head>
<body>
    <div class="container mt-5 mb-10">
        <div class="mb-6">
            <h2 class="text-primary fw-bold mb-4">推荐文章</h2>
            
            <!-- 布局切换选项卡 -->
            <ul class="nav layout-tabs mb-6" id="layoutTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="grid-layout-tab" data-bs-toggle="tab" 
                            data-bs-target="#grid-layout" type="button" role="tab" 
                            aria-controls="grid-layout" aria-selected="true">
                        <i class="fas fa-th-large me-2"></i>网格布局
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="list-layout-tab" data-bs-toggle="tab" 
                            data-bs-target="#list-layout" type="button" role="tab" 
                            aria-controls="list-layout" aria-selected="false">
                        <i class="fas fa-list me-2"></i>列表布局
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="hybrid-layout-tab" data-bs-toggle="tab" 
                            data-bs-target="#hybrid-layout" type="button" role="tab" 
                            aria-controls="hybrid-layout" aria-selected="false">
                        <i class="fas fa-th me-2"></i>混合布局
                    </button>
                </li>
            </ul>
            
            <!-- 布局内容区域 -->
            <div class="tab-content" id="layoutTabsContent">
                <!-- 网格布局 -->
                <div class="tab-pane fade show active" id="grid-layout" role="tabpanel" aria-labelledby="grid-layout-tab">
                    <div class="row g-4">
                        <!-- 无图片文章 -->
                        <div class="col-md-6 col-lg-4 d-flex">
                            <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden w-100 border border-light-gray">
                                <div class="p-5 d-flex flex-column h-100">
                                    <div class="d-flex items-center mb-3">
                                        <span class="post-source">科技</span>
                                        <span class="post-time ms-auto">2小时前</span>
                                    </div>
                                    
                                    <h3 class="fs-lg fw-bold mb-3 line-clamp-2 hover:text-primary transition-colors">
                                        <a href="#" class="text-dark text-decoration-none">人工智能如何改变未来十年的工作方式</a>
                                    </h3>
                                    
                                    <p class="text-gray mb-4 line-clamp-3 flex-grow">
                                        随着生成式AI技术的快速发展，我们的工作方式正经历前所未有的变革。本文深入分析了未来十年内最有可能被自动化的职业类型，以及人类应该如何适应这种转变。
                                    </p>
                                    
                                    <div class="d-flex items-center justify-between mt-auto">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="author-avatar">
                                                <i class="fas fa-user"></i>
                                            </div>
                                            <span class="text-sm fw-medium">科技专栏作家</span>
                                        </div>
                                        
                                        <div class="d-flex items-center gap-3 text-gray text-sm">
                                            <span class="d-flex items-center gap-1"><i class="far fa-eye"></i> 2.4k</span>
                                            <span class="d-flex items-center gap-1"><i class="far fa-comment"></i> 42</span>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>

                        <!-- 单张图片文章 -->
                        <div class="col-md-6 col-lg-4 d-flex">
                            <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden w-100 border border-light-gray flex flex-column">
                                <div class="relative h-48 overflow-hidden">
                                    <img src="https://picsum.photos/600/400?random=1" alt="城市建筑摄影" class="article-image w-full h-full object-cover">
                                    <span class="absolute top-3 left-3 post-source">摄影</span>
                                </div>
                                
                                <div class="p-5 flex-grow d-flex flex-column">
                                    <div class="d-flex justify-content-end mb-3">
                                        <span class="post-time">昨天</span>
                                    </div>
                                    
                                    <h3 class="fs-lg fw-bold mb-3 line-clamp-2 hover:text-primary transition-colors">
                                        <a href="#" class="text-dark text-decoration-none">城市建筑摄影的构图技巧与光影运用</a>
                                    </h3>
                                    
                                    <p class="text-gray mb-4 line-clamp-2 flex-grow">
                                        探索如何通过独特的视角捕捉城市建筑的美感，掌握黄金时刻的光影变化，让你的建筑摄影作品更具视觉冲击力。
                                    </p>
                                    
                                    <div class="d-flex items-center justify-between mt-auto">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="author-avatar">
                                                <i class="fas fa-camera"></i>
                                            </div>
                                            <span class="text-sm fw-medium">光影摄影师</span>
                                        </div>
                                        
                                        <div class="d-flex items-center gap-3 text-gray text-sm">
                                            <span class="d-flex items-center gap-1"><i class="far fa-eye"></i> 5.1k</span>
                                            <span class="d-flex items-center gap-1"><i class="far fa-comment"></i> 87</span>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>

                        <!-- 两张图片文章 -->
                        <div class="col-md-6 col-lg-4 d-flex">
                            <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden w-100 border border-light-gray flex flex-column">
                                <div class="grid grid-cols-2 gap-1 h-48">
                                    <img src="https://picsum.photos/300/400?random=2" alt="意大利美食" class="article-image w-full h-full object-cover">
                                    <img src="https://picsum.photos/300/400?random=3" alt="法国甜点" class="article-image w-full h-full object-cover">
                                </div>
                                
                                <div class="p-5 flex-grow d-flex flex-column">
                                    <div class="d-flex items-center mb-3">
                                        <span class="post-source">美食</span>
                                        <span class="post-time ms-auto">3天前</span>
                                    </div>
                                    
                                    <h3 class="fs-lg fw-bold mb-3 line-clamp-2 hover:text-primary transition-colors">
                                        <a href="#" class="text-dark text-decoration-none">欧洲南部美食文化对比：意大利与法国的烹饪哲学</a>
                                    </h3>
                                    
                                    <p class="text-gray mb-4 line-clamp-2 flex-grow">
                                        深入比较意大利和法国的饮食文化差异，从食材选择到烹饪技巧，解析两国独特的美食哲学和餐桌礼仪。
                                    </p>
                                    
                                    <div class="d-flex items-center justify-between mt-auto">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="author-avatar">
                                                <i class="fas fa-utensils"></i>
                                            </div>
                                            <span class="text-sm fw-medium">环球美食家</span>
                                        </div>
                                        
                                        <div class="d-flex items-center gap-3 text-gray text-sm">
                                            <span class="d-flex items-center gap-1"><i class="far fa-eye"></i> 3.8k</span>
                                            <span class="d-flex items-center gap-1"><i class="far fa-comment"></i> 63</span>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>

                        <!-- 三张图片文章 -->
                        <div class="col-md-6 col-lg-4 d-flex">
                            <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden w-100 border border-light-gray flex flex-column">
                                <div class="grid grid-cols-3 gap-1 h-48">
                                    <img src="https://picsum.photos/200/400?random=4" alt="山地景观" class="article-image w-full h-full object-cover">
                                    <img src="https://picsum.photos/200/400?random=5" alt="湖泊风景" class="article-image w-full h-full object-cover">
                                    <img src="https://picsum.photos/200/400?random=6" alt="森林小径" class="article-image w-full h-full object-cover">
                                </div>
                                
                                <div class="p-5 flex-grow d-flex flex-column">
                                    <div class="d-flex items-center mb-3">
                                        <span class="post-source">旅行</span>
                                        <span class="post-time ms-auto">1周前</span>
                                    </div>
                                    
                                    <h3 class="fs-lg fw-bold mb-3 line-clamp-2 hover:text-primary transition-colors">
                                        <a href="#" class="text-dark text-decoration-none">阿尔卑斯山脉徒步指南：3条绝美路线推荐</a>
                                    </h3>
                                    
                                    <p class="text-gray mb-4 line-clamp-2 flex-grow">
                                        为徒步爱好者精选阿尔卑斯山脉三条难度各异的徒步路线，包含装备建议、最佳季节和沿途风景介绍。
                                    </p>
                                    
                                    <div class="d-flex items-center justify-between mt-auto">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="author-avatar">
                                                <i class="fas fa-hiking"></i>
                                            </div>
                                            <span class="text-sm fw-medium">户外探险家</span>
                                        </div>
                                        
                                        <div class="d-flex items-center gap-3 text-gray text-sm">
                                            <span class="d-flex items-center gap-1"><i class="far fa-eye"></i> 7.2k</span>
                                            <span class="d-flex items-center gap-1"><i class="far fa-comment"></i> 108</span>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>

                        <!-- 无图片长文章 -->
                        <div class="col-md-6 col-lg-4 d-flex">
                            <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden w-100 border border-light-gray">
                                <div class="p-5 d-flex flex-column h-100">
                                    <div class="d-flex items-center mb-3">
                                        <span class="post-source">历史</span>
                                        <span class="post-time ms-auto">2周前</span>
                                    </div>
                                    
                                    <h3 class="fs-lg fw-bold mb-3 line-clamp-2 hover:text-primary transition-colors">
                                        <a href="#" class="text-dark text-decoration-none">丝绸之路对东西方文化交流的深远影响</a>
                                    </h3>
                                    
                                    <p class="text-gray mb-4 line-clamp-3 flex-grow">
                                        丝绸之路不仅是古代贸易的通道，更是东西方文明交流的桥梁。本文从宗教传播、技术交流、艺术融合三个维度，剖析丝绸之路如何塑造了今天的世界文化格局。
                                    </p>
                                    
                                    <div class="d-flex items-center justify-between mt-auto">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="author-avatar">
                                                <i class="fas fa-book"></i>
                                            </div>
                                            <span class="text-sm fw-medium">历史研究员</span>
                                        </div>
                                        
                                        <div class="d-flex items-center gap-3 text-gray text-sm">
                                            <span class="d-flex items-center gap-1"><i class="far fa-eye"></i> 4.5k</span>
                                            <span class="d-flex items-center gap-1"><i class="far fa-comment"></i> 93</span>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>

                        <!-- 四张图片文章 -->
                        <div class="col-md-6 col-lg-4 d-flex">
                            <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden w-100 border border-light-gray flex flex-column">
                                <div class="grid grid-cols-2 gap-1 h-48">
                                    <img src="https://picsum.photos/300/200?random=7" alt="春季服装" class="article-image w-full h-full object-cover">
                                    <img src="https://picsum.photos/300/200?random=8" alt="夏季服装" class="article-image w-full h-full object-cover">
                                    <img src="https://picsum.photos/300/200?random=9" alt="秋季服装" class="article-image w-full h-full object-cover">
                                    <img src="https://picsum.photos/300/200?random=10" alt="冬季服装" class="article-image w-full h-full object-cover">
                                </div>
                                
                                <div class="p-5 flex-grow d-flex flex-column">
                                    <div class="d-flex items-center mb-3">
                                        <span class="post-source">时尚</span>
                                        <span class="post-time ms-auto">3周前</span>
                                    </div>
                                    
                                    <h3 class="fs-lg fw-bold mb-3 line-clamp-2 hover:text-primary transition-colors">
                                        <a href="#" class="text-dark text-decoration-none">四季胶囊衣橱搭建指南：极简主义的时尚表达</a>
                                    </h3>
                                    
                                    <p class="text-gray mb-4 line-clamp-2 flex-grow">
                                        如何用最少的衣物创造出最多的穿搭可能？本文教你构建高效实用的四季胶囊衣橱，既环保又能保持时尚感。
                                    </p>
                                    
                                    <div class="d-flex items-center justify-between mt-auto">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="author-avatar">
                                                <i class="fas fa-tshirt"></i>
                                            </div>
                                            <span class="text-sm fw-medium">时尚顾问</span>
                                        </div>
                                        
                                        <div class="d-flex items-center gap-3 text-gray text-sm">
                                            <span class="d-flex items-center gap-1"><i class="far fa-eye"></i> 6.3k</span>
                                            <span class="d-flex items-center gap-1"><i class="far fa-comment"></i> 124</span>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
                
                <!-- 列表布局 -->
                <div class="tab-pane fade" id="list-layout" role="tabpanel" aria-labelledby="list-layout-tab">
                    <div class="list-layout space-y-4">
                        <!-- 列表项1：带图片 -->
                        <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden border border-light-gray">
                            <div class="article-image-container overflow-hidden">
                                <img src="https://picsum.photos/400/300?random=11" alt="人工智能" class="article-image w-full h-full object-cover">
                            </div>
                            <div class="article-content p-5">
                                <div class="d-flex items-center mb-2">
                                    <span class="post-source">科技</span>
                                    <span class="post-time ms-3">2小时前</span>
                                    <div class="ms-auto d-flex items-center gap-3 text-gray text-sm">
                                        <span class="d-flex items-center gap-1"><i class="far fa-eye"></i> 2.4k</span>
                                        <span class="d-flex items-center gap-1"><i class="far fa-comment"></i> 42</span>
                                    </div>
                                </div>
                                
                                <h3 class="fs-lg fw-bold mb-2 hover:text-primary transition-colors">
                                    <a href="#" class="text-dark text-decoration-none">人工智能如何改变未来十年的工作方式</a>
                                </h3>
                                
                                <p class="text-gray mb-3">
                                    随着生成式AI技术的快速发展，我们的工作方式正经历前所未有的变革。本文深入分析了未来十年内最有可能被自动化的职业类型，以及人类应该如何适应这种转变。
                                </p>
                                
                                <div class="d-flex items-center">
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="author-avatar">
                                            <i class="fas fa-user"></i>
                                        </div>
                                        <span class="text-sm fw-medium">科技专栏作家</span>
                                    </div>
                                    
                                    <button class="ms-auto btn btn-sm btn-outline-primary">阅读全文</button>
                                </div>
                            </div>
                        </article>
                        
                        <!-- 列表项2：带图片 -->
                        <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden border border-light-gray">
                            <div class="article-image-container overflow-hidden">
                                <img src="https://picsum.photos/400/300?random=12" alt="建筑摄影" class="article-image w-full h-full object-cover">
                            </div>
                            <div class="article-content p-5">
                                <div class="d-flex items-center mb-2">
                                    <span class="post-source">摄影</span>
                                    <span class="post-time ms-3">昨天</span>
                                    <div class="ms-auto d-flex items-center gap-3 text-gray text-sm">
                                        <span class="d-flex items-center gap-1"><i class="far fa-eye"></i> 5.1k</span>
                                        <span class="d-flex items-center gap-1"><i class="far fa-comment"></i> 87</span>
                                    </div>
                                </div>
                                
                                <h3 class="fs-lg fw-bold mb-2 hover:text-primary transition-colors">
                                    <a href="#" class="text-dark text-decoration-none">城市建筑摄影的构图技巧与光影运用</a>
                                </h3>
                                
                                <p class="text-gray mb-3">
                                    探索如何通过独特的视角捕捉城市建筑的美感，掌握黄金时刻的光影变化，让你的建筑摄影作品更具视觉冲击力。
                                </p>
                                
                                <div class="d-flex items-center">
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="author-avatar">
                                            <i class="fas fa-camera"></i>
                                        </div>
                                        <span class="text-sm fw-medium">光影摄影师</span>
                                    </div>
                                    
                                    <button class="ms-auto btn btn-sm btn-outline-primary">阅读全文</button>
                                </div>
                            </div>
                        </article>
                        
                        <!-- 列表项3：无图片 -->
                        <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden border border-light-gray">
                            <div class="article-content p-5">
                                <div class="d-flex items-center mb-2">
                                    <span class="post-source">历史</span>
                                    <span class="post-time ms-3">2周前</span>
                                    <div class="ms-auto d-flex items-center gap-3 text-gray text-sm">
                                        <span class="d-flex items-center gap-1"><i class="far fa-eye"></i> 4.5k</span>
                                        <span class="d-flex items-center gap-1"><i class="far fa-comment"></i> 93</span>
                                    </div>
                                </div>
                                
                                <h3 class="fs-lg fw-bold mb-2 hover:text-primary transition-colors">
                                    <a href="#" class="text-dark text-decoration-none">丝绸之路对东西方文化交流的深远影响</a>
                                </h3>
                                
                                <p class="text-gray mb-3">
                                    丝绸之路不仅是古代贸易的通道，更是东西方文明交流的桥梁。本文从宗教传播、技术交流、艺术融合三个维度，剖析丝绸之路如何塑造了今天的世界文化格局。
                                </p>
                                
                                <div class="d-flex items-center">
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="author-avatar">
                                            <i class="fas fa-book"></i>
                                        </div>
                                        <span class="text-sm fw-medium">历史研究员</span>
                                    </div>
                                    
                                    <button class="ms-auto btn btn-sm btn-outline-primary">阅读全文</button>
                                </div>
                            </div>
                        </article>
                        
                        <!-- 列表项4：带多图 -->
                        <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden border border-light-gray">
                            <div class="article-image-container overflow-hidden">
                                <div class="grid grid-cols-2 h-full gap-1">
                                    <img src="https://picsum.photos/200/300?random=13" alt="春季服装" class="article-image w-full h-full object-cover">
                                    <img src="https://picsum.photos/200/300?random=14" alt="夏季服装" class="article-image w-full h-full object-cover">
                                </div>
                            </div>
                            <div class="article-content p-5">
                                <div class="d-flex items-center mb-2">
                                    <span class="post-source">时尚</span>
                                    <span class="post-time ms-3">3周前</span>
                                    <div class="ms-auto d-flex items-center gap-3 text-gray text-sm">
                                        <span class="d-flex items-center gap-1"><i class="far fa-eye"></i> 6.3k</span>
                                        <span class="d-flex items-center gap-1"><i class="far fa-comment"></i> 124</span>
                                    </div>
                                </div>
                                
                                <h3 class="fs-lg fw-bold mb-2 hover:text-primary transition-colors">
                                    <a href="#" class="text-dark text-decoration-none">四季胶囊衣橱搭建指南：极简主义的时尚表达</a>
                                </h3>
                                
                                <p class="text-gray mb-3">
                                    如何用最少的衣物创造出最多的穿搭可能？本文教你构建高效实用的四季胶囊衣橱，既环保又能保持时尚感。
                                </p>
                                
                                <div class="d-flex items-center">
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="author-avatar">
                                            <i class="fas fa-tshirt"></i>
                                        </div>
                                        <span class="text-sm fw-medium">时尚顾问</span>
                                    </div>
                                    
                                    <button class="ms-auto btn btn-sm btn-outline-primary">阅读全文</button>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
                
                <!-- 混合布局 -->
                <div class="tab-pane fade" id="hybrid-layout" role="tabpanel" aria-labelledby="hybrid-layout-tab">
                    <div class="hybrid-layout grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <!-- 特色文章（跨两列） -->
                        <article class="article-card featured-article bg-white rounded-xl shadow-sm overflow-hidden border border-light-gray flex flex-column">
                            <div class="relative h-64 overflow-hidden">
                                <img src="https://picsum.photos/800/500?random=15" alt="阿尔卑斯山脉" class="article-image w-full h-full object-cover">
                                <span class="absolute top-3 left-3 post-source">精选</span>
                            </div>
                            
                            <div class="p-5 flex-grow d-flex flex-column">
                                <div class="d-flex items-center mb-3">
                                    <span class="post-source bg-success">旅行</span>
                                    <span class="post-time ms-auto">1周前</span>
                                </div>
                                
                                <h3 class="fs-xl fw-bold mb-3 line-clamp-2 hover:text-primary transition-colors">
                                    <a href="#" class="text-dark text-decoration-none">阿尔卑斯山脉徒步指南：3条绝美路线推荐</a>
                                </h3>
                                
                                <p class="text-gray mb-4 line-clamp-3 flex-grow">
                                    为徒步爱好者精选阿尔卑斯山脉三条难度各异的徒步路线，包含装备建议、最佳季节和沿途风景介绍。从初级到高级，总有一条路线适合你探索阿尔卑斯的壮丽景色。
                                </p>
                                
                                <div class="d-flex items-center justify-between mt-auto">
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="author-avatar">
                                            <i class="fas fa-hiking"></i>
                                        </div>
                                        <span class="text-sm fw-medium">户外探险家</span>
                                    </div>
                                    
                                    <div class="d-flex items-center gap-3 text-gray text-sm">
                                        <span class="d-flex items-center gap-1"><i class="far fa-eye"></i> 7.2k</span>
                                        <span class="d-flex items-center gap-1"><i class="far fa-comment"></i> 108</span>
                                    </div>
                                </div>
                            </div>
                        </article>
                        
                        <!-- 普通文章1 -->
                        <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden border border-light-gray flex flex-column">
                            <div class="relative h-40 overflow-hidden">
                                <img src="https://picsum.photos/400/300?random=16" alt="美食文化" class="article-image w-full h-full object-cover">
                                <span class="absolute top-3 left-3 post-source">美食</span>
                            </div>
                            
                            <div class="p-4 flex-grow d-flex flex-column">
                                <h3 class="fs-md fw-bold mb-2 line-clamp-2 hover:text-primary transition-colors">
                                    <a href="#" class="text-dark text-decoration-none">欧洲南部美食文化对比</a>
                                </h3>
                                
                                <p class="text-gray mb-3 line-clamp-2 flex-grow text-sm">
                                    深入比较意大利和法国的饮食文化差异，从食材选择到烹饪技巧。
                                </p>
                                
                                <div class="d-flex items-center justify-between mt-auto">
                                    <span class="text-xs text-gray">3天前</span>
                                    <span class="text-xs text-gray d-flex items-center gap-1"><i class="far fa-eye"></i> 3.8k</span>
                                </div>
                            </div>
                        </article>
                        
                        <!-- 普通文章2 -->
                        <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden border border-light-gray flex flex-column">
                            <div class="p-4 flex-grow d-flex flex-column">
                                <div class="d-flex items-center mb-2">
                                    <span class="post-source text-xs px-2 py-0.5">科技</span>
                                    <span class="post-time ms-auto text-xs">2小时前</span>
                                </div>
                                
                                <h3 class="fs-md fw-bold mb-2 line-clamp-2 hover:text-primary transition-colors">
                                    <a href="#" class="text-dark text-decoration-none">人工智能如何改变未来工作</a>
                                </h3>
                                
                                <p class="text-gray mb-3 line-clamp-3 flex-grow text-sm">
                                    随着生成式AI技术的快速发展，我们的工作方式正经历前所未有的变革。
                                </p>
                                
                                <div class="d-flex items-center justify-between mt-auto text-xs text-gray">
                                    <span>科技专栏作家</span>
                                    <span class="d-flex items-center gap-1"><i class="far fa-comment"></i> 42</span>
                                </div>
                            </div>
                        </article>
                        
                        <!-- 普通文章3 -->
                        <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden border border-light-gray flex flex-column">
                            <div class="grid grid-cols-2 gap-1 h-40">
                                <img src="https://picsum.photos/200/200?random=17" alt="春季服装" class="article-image w-full h-full object-cover">
                                <img src="https://picsum.photos/200/200?random=18" alt="冬季服装" class="article-image w-full h-full object-cover">
                            </div>
                            
                            <div class="p-4 flex-grow d-flex flex-column">
                                <h3 class="fs-md fw-bold mb-2 line-clamp-2 hover:text-primary transition-colors">
                                    <a href="#" class="text-dark text-decoration-none">四季胶囊衣橱搭建指南</a>
                                </h3>
                                
                                <p class="text-gray mb-3 line-clamp-2 flex-grow text-sm">
                                    如何用最少的衣物创造出最多的穿搭可能？
                                </p>
                                
                                <div class="d-flex items-center justify-between mt-auto">
                                    <span class="text-xs text-gray">3周前</span>
                                    <span class="text-xs text-gray d-flex items-center gap-1"><i class="far fa-eye"></i> 6.3k</span>
                                </div>
                            </div>
                        </article>
                        
                        <!-- 普通文章4 -->
                        <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden border border-light-gray flex flex-column">
                            <div class="relative h-40 overflow-hidden">
                                <img src="https://picsum.photos/400/300?random=19" alt="建筑摄影" class="article-image w-full h-full object-cover">
                                <span class="absolute top-3 left-3 post-source">摄影</span>
                            </div>
                            
                            <div class="p-4 flex-grow d-flex flex-column">
                                <h3 class="fs-md fw-bold mb-2 line-clamp-2 hover:text-primary transition-colors">
                                    <a href="#" class="text-dark text-decoration-none">城市建筑摄影的构图技巧</a>
                                </h3>
                                
                                <p class="text-gray mb-3 line-clamp-2 flex-grow text-sm">
                                    探索如何通过独特的视角捕捉城市建筑的美感，掌握黄金时刻的光影变化。
                                </p>
                                
                                <div class="d-flex items-center justify-between mt-auto">
                                    <span class="text-xs text-gray">昨天</span>
                                    <span class="text-xs text-gray d-flex items-center gap-1"><i class="far fa-eye"></i> 5.1k</span>
                                </div>
                            </div>
                        </article>
                        
                        <!-- 普通文章5 -->
                        <article class="article-card bg-white rounded-xl shadow-sm overflow-hidden border border-light-gray flex flex-column">
                            <div class="p-4 flex-grow d-flex flex-column">
                                <div class="d-flex items-center mb-2">
                                    <span class="post-source text-xs px-2 py-0.5">历史</span>
                                    <span class="post-time ms-auto text-xs">2周前</span>
                                </div>
                                
                                <h3 class="fs-md fw-bold mb-2 line-clamp-2 hover:text-primary transition-colors">
                                    <a href="#" class="text-dark text-decoration-none">丝绸之路对文化交流的影响</a>
                                </h3>
                                
                                <p class="text-gray mb-3 line-clamp-3 flex-grow text-sm">
                                    丝绸之路不仅是古代贸易的通道，更是东西方文明交流的桥梁。
                                </p>
                                
                                <div class="d-flex items-center justify-between mt-auto text-xs text-gray">
                                    <span>历史研究员</span>
                                    <span class="d-flex items-center gap-1"><i class="far fa-comment"></i> 93</span>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
            
            <!-- 加载更多按钮 -->
            <div class="text-center mt-8">
                <button class="btn btn-outline-primary px-6 py-2 rounded-full hover:bg-primary hover:text-white transition-all">
                    加载更多文章 <i class="fas fa-refresh ms-2"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // 初始化布局切换
        const layoutTabs = new bootstrap.Tab('#layoutTabs');
        
        // 为文章卡片添加点击事件
        document.querySelectorAll('.article-card').forEach(card => {
            card.addEventListener('click', function(e) {
                // 如果点击的是按钮或链接，不触发卡片点击事件
                if (e.target.closest('button, a')) return;
                
                // 获取文章链接
                const articleLink = this.querySelector('h3 a').getAttribute('href');
                if (articleLink && articleLink !== '#') {
                    window.location.href = articleLink;
                } else {
                    alert('查看文章详情');
                }
            });
        });
        
        // 加载更多按钮点击事件
        document.querySelector('.btn-outline-primary').addEventListener('click', function() {
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                this.innerHTML = '加载更多文章 <i class="fas fa-refresh ms-2"></i>';
                alert('已加载全部文章');
            }, 1500);
        });
    </script>
</body>
</html>
    
